<template>
	<view>
		<!-- 秒杀活动 -->
		<view class="list">
			<view class="list_overflow">
				<view v-for="(item,index) in list" :class="listIndex==index?'list_lis':'list_li'"
					@click="listData(index)">
					<view class="list_text">
						{{item.time}}
					</view>
					<view class="list_text">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="rob">
			<view class="rob_title">
				实时热抢
			</view>
			<view class="rob_list">
				<view class="rob_list_li" v-for="(item,index) in 4">
					<image :lazy-load="true" src="../../../static/images/秒杀活动-手机.png" class="img_rob"></image>
					<view class="rob_list_li_text">
						Apple iPhone 12 PrO0000000
					</view>
					<view class="rob_list_li_paice">
						￥88.00
					</view>
					<view class="rob_list_li_paices">
						￥88.00
					</view>
				</view>
			</view>
		</view>
		<view class="text_list">
			<view class="text_list_li" v-for="(item,index) in text_list_li" @click="textClick(item.id)">
				<view class="left">
					<image :lazy-load="true" :src="item.image" class="left_img"></image>
				</view>
				<view class="right">
					<view class="right_title">
						<image :lazy-load="true" :src="item.img" class="right_title_img"></image>
						<view class="right_text">
							{{item.title}}
						</view>
						<view class="right_price">
							￥{{item.Price}}
						</view>
						<button type="default" class="right_but">
							{{item.immediately}}
						</button>
						<view class="progress">
							<ai-progress :percentage="57" bg-color="#f46" :text-inside="true" :stroke-width="20" :is-animate="true" :duration="5000"></ai-progress>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					"time": "10:00",
					"title": "已抢完"
				}, {
					"time": "11:00",
					"title": "抢购进行中"
				}, {
					"time": "11:00",
					"title": "即将开场"
				}, {
					"time": "11:00",
					"title": "即将开场"
				}, {
					"time": "11:00",
					"title": "即将开场"
				}, {
					"time": "11:00",
					"title": "即将开场"
				}],
				text_list_li: [{
					"id":1,
					"image": "../../../static/images/秒杀活动-列表.png",
					"img": "../../../static/images/秒杀页面-贺新年.png",
					"title": "发的VN速度VB多少次低输出大货车第四次第三次第三步第四次第三次第三步",
					"Price": 234.5,
					"immediately": "立即抢够"
				}, {
					"id":2,
					"image": "../../../static/images/秒杀活动-列表.png",
					"img": "../../../static/images/秒杀页面-贺新年.png",
					"title": "发的VN速度VB多少次低输出大货车第四次第三次第三步第四次第三次第三步",
					"Price": 234.5,
					"immediately": "立即抢够"
				}, {
					"id":3,
					"image": "../../../static/images/秒杀活动-列表.png",
					"img": "../../../static/images/秒杀页面-贺新年.png",
					"title": "发的VN速度VB多少次低输出大货车第四次第三次第三步第四次第三次第三步",
					"Price": 234.5,
					"immediately": "立即抢够"
				}, {
					"id":4,
					"image": "../../../static/images/秒杀活动-列表.png",
					"img": "../../../static/images/秒杀页面-贺新年.png",
					"title": "发的VN速度VB多少次低输出大货车第四次第三次第三步第四次第三次第三步",
					"Price": 234.5,
					"immediately": "立即抢够"
				}, {
					"id":5,
					"image": "../../../static/images/秒杀活动-列表.png",
					"img": "../../../static/images/秒杀页面-贺新年.png",
					"title": "发的VN速度VB多少次低输出大货车第四次第三次第三步第四次第三次第三步",
					"Price": 234.5,
					"immediately": "立即抢够"
				}],
				listIndex: 1
			}
		},
		methods: {
			listData(index) {
				this.listIndex = index
			},
			textClick(id){
				// 列表详情
				console.log(id)
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
				    url: '/pages/home/SecKill-active/Product-details/Product-details?id='+id
				});
				// Product-details
			}
		}
	}
</script>

<style scoped>
	.progress {
		width: 240rpx;
		margin-top: 30rpx;
	}

	.right_but {
		text-align: center;
		line-height: 60rpx;
		margin-right: 384rpx;
		width: 180rpx;
		height: 60rpx;
		font-size: 25rpx;
		color: #fff;
		border-radius: 40rpx;
		background: #E43D33;
	}

	.right_price {
		line-height: 90rpx;
		color: #E43D33;
		font-size: 37rpx;
	}

	.right_text {
		width: 485rpx;
		text-indent: 95rpx;
		margin-top: -24px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.right_title_img {
		width: 80rpx;
		height: 40rpx;
	}

	.right_title {}

	.left_img {
		width: 100%;
		height: 100%;
	}

	.right {
		width: 65%;
		height: 25vh;
	}

	.left {
		width: 35%;
		height: 25vh;
		background-color: #656;
	}

	.text_list_li {
		margin-top: 40rpx;
		height: 25vh;
		display: flex;
	}

	.text_list {
		width: 100%;
		height: auto;
		background-color: #fff;
	}

	.rob_list_li_paices {
		color: red;
		font-size: 20rpx;
		font-weight: 600;
	}

	.rob_list_li_paice {
		font-size: 13rpx;
		text-decoration: line-through;
		color: #666;
	}

	.rob_list_li_text {
		font-size: 13rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.img_rob {
		width: 100%;
		height: 10vh;
		margin-top: 20rpx;
		background-color: #3A3A3A;
	}

	.rob_list_li {
		width: 20%;
		margin-left: 4%;
	}

	.rob_list {
		width: 100%;
		height: 18vh;
		/* background-color: #fff; */
		display: flex;
	}

	.rob_title {
		font-weight: 600;
		line-height: 60rpx;
		margin-left: 2%;
	}

	.rob {
		width: 95%;
		height: 25vh;
		background-color: #fff;
		margin-left: 3%;
		border-radius: 20rpx;
		margin-top: -60rpx;
		z-index: 99;
		border: 1px solid #565;
	}

	.list_lis {
		width: 25%;
		height: 8vh;
		display: inline-block;
		/*行内块元素*/
		text-align: center;
		font-size: 25rpx;
		margin-top: 20rpx;
		color: #FFFFFF;
	}

	.list_li {
		width: 25%;
		height: 8vh;
		display: inline-block;
		/*行内块元素*/
		text-align: center;
		font-size: 25rpx;
		margin-top: 20rpx;
	}

	/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
	.list_overflow::-webkit-scrollbar {
		display: none;
	}

	.list_overflow {
		overflow-y: auto;
		/*可滑动*/
		white-space: nowrap;
		/*文本不会换行，文本会在在同一行上继续*/
	}

	.list {
		width: 100%;
		height: 15vh;
		background-color: #007AFF;
	}
</style>
